<template>
	<div>
		<div class="container use-table">
			<el-alert title="推荐小程序列表为空,小程序端不展示推荐入口" type="warning" @close="hello">
			</el-alert>
			<el-table :data="recommendApp" row-key="app_id">
				<el-table-column prop="app_name" label="小程序名称"></el-table-column>
				<el-table-column prop="app_id" label="小程序AppID"></el-table-column>

				<el-table-column property="img" label="小程序icon" align="center">
					<template slot-scope="scope">
						<el-image style="width: 120px;height: 80px" :src="scope.row.app_logo"
							:preview-src-list="scope.row.app_logo" fit="contain"></el-image>
					</template>
				</el-table-column>

				<el-table-column label="排序" align="center">
					<template slot-scope="scope">
						<el-input-number size="small" :min="1" v-model="scope.row.sort" @change="sortChange(scope.row)"
							@blur="sortChange(scope.row)"></el-input-number>
					</template>
				</el-table-column>

				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="small" icon="el-icon-edit"
							@click="toEdit(scope.row)">编辑</el-button>
						<el-button type="danger" size="small" icon="el-icon-error"
							@click="remove(scope.row)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>
		</div>
		<el-button @click="toAdd">+新增</el-button>

		<vk-data-dialog v-model="shareappAddEditIsShow" title="新增小程序" width="1200px" mode="form"
			:close-on-click-modal="false">
			<shareappAddEdit ref="shareappAddEdit" v-if="shareappAddEditIsShow" :form="recommendAppData"
				@addNewApp="addNewApp" @popClose="popClose"></shareappAddEdit>
		</vk-data-dialog>

	</div>
</template>

<script>
	import shareappAddEdit from "./shareapp_add_edit.vue";

	const __name = 'ny-share-app';
	export default {
		components: {
			shareappAddEdit,
		},
		props: {
			recommendApp: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				tblHeight: 600,
				recommendAppData: null,
				shareappAddEditIsShow: false,
			};
		},
		mounted() {
			console.log("父组件————mounted...");
		},
		methods: {
			updateAppInfo() {
				this.recommendApp = this.recommendApp
			},
			addNewApp(res) {
				this.recommendApp.push(res)
			},
			popClose() {
				this.shareappAddEditIsShow = !this.shareappAddEditIsShow
			},
			toAdd() {
				this.recommendAppData = {}

				this.shareappAddEditIsShow = !this.shareappAddEditIsShow
			},
			toEdit(data) {
				console.log('toEdit', data)
				this.shareappAddEditIsShow = !this.shareappAddEditIsShow
				setTimeout(() => {
					this.$refs.shareappAddEdit.editAppInfo(data)

				}, 100)
			},
			remove(data) {
				console.log('remove', data)

				// this.recommendAppData = data
				this.$confirm('此操作将永久删除该数据！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let index = this.recommendApp.indexOf(data);
					if (index !== -1) {
						this.recommendApp.splice(index, 1);
					}

				});
			},
			sortChange(row) {
				if (row.sort == '') {
					return;
				}
				console.log('row.sort', row.sort)
			}
		}
	};
</script>

<style></style>